$slider_handle_size: 8px
$slider_handle_top: -0.4em
$slide_height: 0.8em

#zoom-slider
  border-top: 1px solid #555
  .ui-slider-handle
    background: #888
    border-radius: 8px

.ui-slider
  position: relative

  .ui-slider-handle
    position: absolute
    z-index: 2
    width: $slider_handle_size
    height: $slider_handle_size
    cursor: default
  .ui-slider-range
    position: absolute
    z-index: 1
    font-size: 0.7em
    display: block
    border: 0
    background-position: 0 0

.ui-slider-horizontal
  height: $slide_height
  .ui-slider-handle
    top: $slider_handle_top
    margin-left: -0.6em
  .ui-slider-range
    top: 0
    height: 100%
  .ui-slider-range-min
    left: 0
  .ui-slider-range-max
    right: 0

.ui-slider-vertical
  width: $slide_height
  height: 100px
  .ui-slider-handle
    left: $slider_handle_top
    margin-left: 0
    margin-bottom: -0.6em
  .ui-slider-range
    left: 0
    width: 100%
  .ui-slider-range-min
    bottom: 0
  .ui-slider-range-max
    top: 0
